<style scoped lang="less">
  @import "OrderList";
</style>
<script>
  const BTN_TO_NONE = 0;//
  const BTN_TO_PAY = 1;//支付
  const BTN_TO_USE = 2;//使用
  const BTN_TO_CONFIRM = 3;//收货
  const BTN_TO_COMMENT = 4;//评价
  const BTN_TO_REFUND = 5;//退款

  //付款状态
  // const PAY_STATUS_UN_PAY_ONLINE = 0;//线上未付款
  // const PAY_STATUS_PAID_FAILED_ONLINE = 4;//线上付款失败
  // const PAY_STATUS_PAID_ONLINE = 5;//线上已付款
  // const PAY_STATUS_UN_PAY_OFFLINE = 10;//线下未付款
  // const PAY_STATUS_PAID_OFFLINE = 15;//线下已付款
  // const PAY_STATUS_WAIT_REFUND = 19;//退款中
  // const PAY_STATUS_REFUNDED = 20;//已退款
  // //订单状态
  // const ORDER_STATUS_NORMAL = 0;//订单的正常状态，未付款前或已付款后都是这个状态，已付款后就是待使用
  // const ORDER_STATUS_USED = 5;//已使用AND待评价
  // const ORDER_STATUS_CLOSE = 10;//关闭
  // const ORDER_STATUS_EXPIRE = 15;//已过期

  import {getOrderList} from '@/api/order';
  import Vue from 'vue';
  import {List, Tab, Tabs} from 'vant';

  Vue.use(List).use(Tab).use(Tabs);
  export default {
    name: 'order-list',
    data() {
      return {
        type: null,
        order_id: null,
        active: 0,
        orderTypes: [{index: 0, type: 0, title: '全部', list: [], finished: false, loading: false},
          {index: 1, type: 1, title: '待付款', list: [], finished: false, loading: false},
          {index: 2, type: 2, title: '待使用', list: [], finished: false, loading: false},
          {index: 3, type: 3, title: '待收货', list: [], finished: false, loading: false},
          {index: 4, type: 4, title: '待评价', list: [], finished: false, loading: false}]
      };
    },
    created() {
      this.type = this.$route.params.type;
      if (this.type !== null && this.type !== undefined) {
        this.active = this.type;
      }
    },
    methods: {
      onLoad(index) {
        if (this.orderTypes[index].finished) {
          return;
        }
        this.getOrders();
      },
      /**
       * 订单状态
       * @param status 交易状态
       * @param payStatus 支付状态
       * @param orderType 订单类型
       */
      getOrderStatusStr(status, payStatus, orderType) {
        let statusStr = '';
        //如果订单状态为进行中
        if (status === this.GLOBAL.ORDER_STATUS_NORMAL) {
          //进行中且未付款或付款失败
          if (payStatus === this.GLOBAL.PAY_STATUS_UN_PAY_ONLINE || payStatus === this.GLOBAL.PAY_STATUS_PAID_FAILED_ONLINE) {
            statusStr = '待付款';
            //进行中且已付款
          } else if (payStatus === this.GLOBAL.PAY_STATUS_PAID_ONLINE) {
            statusStr = '待使用';
            //如果是实物订单订单
            if (orderType === this.GLOBAL.TRANSPORT_TYPE_EXPRESS) {
              statusStr = '待收货';
            }
            //进行中-线下付款-未付款（即到店付款的）
          } else if (payStatus === this.GLOBAL.PAY_STATUS_UN_PAY_OFFLINE) {
            statusStr = '待使用';
          } else if (payStatus === this.GLOBAL.PAY_STATUS_WAIT_REFUND) {
            statusStr = '退款中';
          }
          //如果订单状态为已使用或已收货
        } else if (status === this.GLOBAL.ORDER_STATUS_USED) {
          //只有一种状态，待评价
          statusStr = '待评价'
        } else if (status === this.GLOBAL.ORDER_STATUS_CLOSE) {
          if (payStatus === this.GLOBAL.PAY_STATUS_REFUNDED) {
            statusStr = '已退款'
          } else {
            //订单状态为关闭
            statusStr = '已关闭'
          }
        } else if (status === this.GLOBAL.ORDER_STATUS_EXPIRE) {
          statusStr = '已过期';
          if (payStatus === this.GLOBAL.PAY_STATUS_WAIT_REFUND) {
            statusStr = '退款中';
          }
        }
        return statusStr;
      },
      /**
       * 获取订单对应的操作状态
       * @param status 交易状态
       * @param payStatus 支付状态
       * @param orderType 订单类型
       * @param has_comment 是否已经评价了
       */
      getOrderOpBtn(status, payStatus, orderType, has_comment) {
        let statusStr = '';
        let opStyle = BTN_TO_NONE;
        //如果订单状态为进行中
        if (status === this.GLOBAL.ORDER_STATUS_NORMAL) {
          //进行中且未付款或付款失败
          if (payStatus === this.GLOBAL.PAY_STATUS_UN_PAY_ONLINE || payStatus === this.GLOBAL.PAY_STATUS_PAID_FAILED_ONLINE) {
            statusStr = '付款';
            opStyle = BTN_TO_PAY;

            //进行中且已付款
          } else if (payStatus === this.GLOBAL.PAY_STATUS_PAID_ONLINE) {
            statusStr = '使用';
            opStyle = BTN_TO_USE;

            //如果是实物订单订单
            if (orderType === this.GLOBAL.TRANSPORT_TYPE_EXPRESS) {
              statusStr = '确认收货';
              opStyle = BTN_TO_CONFIRM;
            }

            //进行中-线下付款-未付款（即到店付款的）
          } else if (payStatus === this.GLOBAL.PAY_STATUS_UN_PAY_OFFLINE) {
            statusStr = '使用';
            opStyle = BTN_TO_USE;
          }

          //如果订单状态为已使用或已收货
        } else if (status === this.GLOBAL.ORDER_STATUS_USED && has_comment === 0) {

          //只有一种状态，待评价
          statusStr = '评价';
          opStyle = BTN_TO_COMMENT;

          //如果订单已经被关闭
        } else if (status === this.GLOBAL.ORDER_STATUS_CLOSE) {
          // if (payStatus === PAY_STATUS_REFUNDED) {
          //   statusStr = '已退款'
          // } else {
          //   //订单状态为关闭
          //   statusStr = '已关闭'
          // }
        } else if (status === this.GLOBAL.ORDER_STATUS_EXPIRE) {
          statusStr = '退款';
          if (payStatus === this.GLOBAL.PAY_STATUS_PAID_ONLINE) {
            opStyle = BTN_TO_REFUND;
          } else if (payStatus === this.GLOBAL.PAY_STATUS_WAIT_REFUND) {
            statusStr = '退款中';
          }
        } else {
          statusStr = '';
        }
        return {style: opStyle, str: statusStr};
      },
      /**
       *
       * @param opType 操作类型
       * @param orderId 订单id
       */
      toOp(opType, orderId) {
        if (opType === BTN_TO_PAY) {
          this.$router.push({name: 'pay', params: {order_id: orderId}});
        } else if (opType === BTN_TO_USE) {
          this.$router.push({name: 'order-code', params: {order_id: orderId}});
        } else if (opType === BTN_TO_CONFIRM) {
          alert('去确认收货');
        } else if (opType === BTN_TO_COMMENT) {
          this.$router.push({name: 'order-comment', params: {order_id: orderId}})
        } else if (opType === BTN_TO_REFUND) {
          this.$router.push({name: 'order-refund', params: {order_id: orderId}});
        }
      },
      getOrders() {
        let vm = this;
        if (vm.orderTypes[vm.active].finished) {
          return;
        }
        let page = vm.orderTypes[vm.active].list.length / 20 + 1;
        getOrderList({page: page, size: 20, type: vm.orderTypes[vm.active].type}).then(rep => {
          rep.data.data.list.forEach(v => {
            v.opBtn = vm.getOrderOpBtn(v.trade_status, v.pay_status, v.type, v.has_comment);
          });
          vm.orderTypes[vm.active].list = vm.orderTypes[vm.active].list.concat(rep.data.data.list);
          if (vm.orderTypes[vm.active].list.length === rep.data.data.count) {
            vm.orderTypes[vm.active].finished = true;
          }
          vm.orderTypes[vm.active].loading = false;
        });
      }
    }
  }
</script>
<template>
  <div>
    <van-tabs v-if="orderTypes!==null" v-model="active" sticky animated swipeable
              title-active-color="#EC414D"
              :swipe-threshold="5" lazy-render>
      <template v-for="(orderTypeItem,index) in orderTypes">
        <van-tab :title="orderTypeItem.title" :name="orderTypeItem.index" :key="index">
          <van-list
            v-model="orderTypeItem.loading"
            :finished="orderTypeItem.finished"
            finished-text="没有更多了"
            @load="onLoad(index)">
            <div class="order-item" v-for="item in orderTypeItem.list"
                 :key="index+item.id">
              <div class="order-top">
              <span class="order-create-time">
                {{item.create_time}}
              </span>
                <span class="status">{{getOrderStatusStr(item.trade_status,item.pay_status,item.type)}}</span>
              </div>
              <div class="order-goods-info" v-for="(skuItem) in item.item" :key="index+skuItem.id">
                <img alt="商品图" class="order-goods-img"
                     :src="GLOBAL.getUrl(skuItem.goods_img,false,true)">
                <div class="order-goods-info-content">
                  <div class="order-goods-info-title">
                    {{skuItem.goods_title}}
                  </div>
                  <div class="order-item-price-wrap">
                    <span class="order-item-goods-num">×{{skuItem.goods_num}}</span>
                    <span class="order-item-price"><span class="symbol">￥</span>{{GLOBAL.formatPrice(skuItem.goods_price)}}</span>
                  </div>
                </div>
              </div>
              <div class="order-item-amount-wrap">
                  <span class="order-id">
                    订单号:{{item.id}}
                  </span>
                <span class="order-item-amount">
                    共
                    <span class="symbol">￥</span>
                    <span class="order-amout">{{GLOBAL.formatPrice(item.pay_amount)}}</span>
                  </span>
              </div>
              <div class="order-item-op-wrap" v-if="item.opBtn.style">
                <span class="order-item-op-pay" @click="toOp(item.opBtn.style,item.id)">{{item.opBtn.str}}</span>
              </div>
            </div>
          </van-list>
        </van-tab>
      </template>
    </van-tabs>

  </div>
</template>
